<template>
	<custom-page title="" guideObserverId="photoScroll" :float="true" nav-background-color="transparent" borderBottomColor="transparent" backgroundColor="#F9F9F9">
		<template #content>
			<view class="detail-layout">
				<view class="photo-layout">
					<swiper class="swiper" @change="swiperImageChange" :current="swiperCurrent">
						<swiper-item v-for="(item,index) in picList" :key="index">
							<view class="video-item-layout">
								<image v-if="getAddressIsVideo(item.videoAddress)" class="video-play-img" :src="ftpUrl + '/ic_triangle_white.png'" @click="videoClick(item.videoAddress)"></image>
								<image class="bg-img" :src="item.videoAddress + '?x-oss-process=video/snapshot,t_0,f_jpg'" v-if="getAddressIsVideo(item.videoAddress)" 
									mode="aspectFill" @click="videoClick(item.videoAddress)"></image>
								<image class="bg-img" :src="item.videoAddress" v-else mode="aspectFill" @click="swiperImageClick(index)"></image>
							</view>
						</swiper-item>
					</swiper>
					
					<scroll-view class="photo-scroll" :scroll-x="true" id="photoScroll">
						<view class="photo-view">
							<view v-for="(item, index) in picList" :key="index" :class="selectPic.id==item.id?'photo-select':'photo-normal'">
								<image class="photo-item" v-if="getAddressIsVideo(item.videoAddress)"
								:src="item.videoAddress + '?x-oss-process=video/snapshot,t_0,f_jpg'"
								mode="aspectFill" @click="photoClick(item, index)"></image>
								<image class="photo-item" v-else
								:src="item.videoAddress"
								mode="aspectFill"
								 @click="photoClick(item, index)"></image>
							</view>
							
						</view>
					</scroll-view>
				</view>
				<view class="top-radius">
					<assistant-info :itemData="assistantDetailInfo"></assistant-info>
				</view>
				<top-tab-bar-news minWidth="20%" :tabs="tabDatas" :current="current" @changed="onTabItemChange($event)"></top-tab-bar-news>
				<template v-if="current == 1">
					<view>
						<assistant-store-item v-for="(item, index) in pollHallListData" :itemData="item" @storeClick="storeClick(item)"></assistant-store-item>
					</view>
				</template>
				<template v-else>
					<template v-if="videoList && videoList.length>0">
						<view class="video-layout">
							<view class="video-item" v-for="(item, index) in videoList" :class="((index+1)%3)==0?'':'right-14'" @click="videoPlayClick(item)">
								<video class="video-img" :src="item.videoAddress" :show-center-play-btn="false" :show-play-btn="false" :show-fullscreen-btn="false"></video>
								<image :src="asserts.ic_video_play" class="play-img"></image>
							</view>
						</view>
					</template>
					<template v-else>
						<no-more-holder class="nodata" :image="asserts.ic_nodata2"></no-more-holder>
					</template>
				</template>
				<view style="height: 32rpx;"></view>
			</view>
		</template>
		<template #foot>
			<view class="bottom-btn-layout">
				<view class="btn-view" @click="reserveNowClick">立即预约</view>
			</view>
		</template>
	</custom-page>
</template>

<script>
	import { getIsVideo } from '../../utils/utils'
	export default {
		computed: {
			getAddressIsVideo(){
				return (value)=> {
					return getIsVideo(value)
				}
			},
		},
		data() {
			return {
				tabDatas: [
					// {
					// 	text: '服务门店'
					// },
					{
						text: '助教风采'
					}
				],
				current: 0,
				selectPhotoIndex: 0,
				userId: '',
				assistantDetailInfo: {},
				pollHallListData: [],
				videoList: [],
				picList: [],
				selectPic: {},
				swiperCurrent: 0,
			}
		},
		onLoad(val) {
			this.userId = val.userId
			this.getAssistantDetail()
			this.getPollHallList()
			this.getAssistantVideoImage()
		},
		methods: {
			//tab切换
			onTabItemChange: function(event) {
				this.current = event.value
			},
			
			//轮播图切换
			swiperImageChange(event){
				let index = event.detail.current
				this.swiperCurrent = index
				this.selectPic = this.picList[index]
			},
			
			//助教详情
			getAssistantDetail(){
				this.requestCenter.getAssistantDetail(this.userId).then(res => {
					this.assistantDetailInfo = res
				})
			},
			
			//获取助教照片或视频
			getAssistantVideoImage(){
				let params = {
					userId: this.userId
				}
				this.requestCenter.getAssistantVideoImage(params).then(res => {
					if(res){
						this.videoList = res.videoList
						this.picList = res.picList
						if(this.picList && this.picList.length>0){
							this.selectPic = this.picList[0]
						}
					}
				})
			},
			
			//台球厅列表
			getPollHallList(){
				this.requestCenter.getPollHallList().then(res => {
					this.pollHallListData = res
				})
			},
			
			//轮播图点击
			swiperImageClick(index){
				let urls = this.picList.map(e => e.videoAddress)
				uni.previewImage({
					urls: urls,
					current: index
				})
			},
			
			//图片点击
			photoClick(item, index){
				this.swiperCurrent = index
				this.selectPic = item
			},
			
			//点击视频
			videoClick(path){
				uni.navigateTo({
					url: '/pages/common-video-player/common-video-player',
					success: function(res) {
					    res.eventChannel.emit('videoInfo', {data: path})
					},
				})
			},
			
			//视频播放
			videoPlayClick(item){
				uni.navigateTo({
					url: '/pages/square-video-detail/square-video-detail?isShowInfo=0',
					success: function(res) {
					    res.eventChannel.emit('squareVideoInfo', { data: item})
					},
				})
			},
			
			//点击门店
			storeClick(item){
				uni.navigateTo({
					url: `/pages/assistant-store-detail/assistant-store-detail?userId=${this.userId}&pollId=${item.id}`
				})
			},
			
			//点击立即预约
			reserveNowClick(){
				if(this.assistantDetailInfo.orderReceivingState == 0){
					uni.showToast({
						title: "该助教休息中"
					})
					return
				}
				uni.navigateTo({
					url: `/pages/assistant-reserve/assistant-reserve?userId=${this.userId}`
				})
			}
			
		}
	}
</script>

<style scoped lang="less">
	.bottom-btn-layout{
		width: 100%;
		background-color: white;
		padding: 12rpx 32rpx;
		box-sizing: border-box;
		.btn-view{
			background-color: #01CBFF;
			border-radius: 44rpx;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
		}
	}
	.detail-layout{
		width: 100%;
		display: flex;
		flex-direction: column;
	}
	.swiper{
		width: 100%;
		height: 800rpx;
	}
	.video-item-layout{
		width: 100%;
		height: 800rpx;
		position: relative;
		.video-play-img{
			width: 50rpx;
			height: 50rpx;
			position: absolute;
			top: 50%;
			left: 50%;
		}
	}
	.photo-layout{
		width: 100%;
		height: 800rpx;
		position: relative;
		.bg-img{
			width: 100%;
			height: 100%;
		}
		.photo-scroll{
			width: calc(100% - 32rpx);
			position: absolute;
			bottom: 90rpx;
			margin: 0 16rpx;
		}
		.photo-view{
			width: auto;
			display: inline-flex;
			view{
				margin-right: 16rpx;
				border-radius: 12rpx;
			}
		}
		.photo-item{
			width: 112rpx;
			height: 112rpx;
			border-radius: 12rpx;
		}
		.photo-select{
			border: solid 2rpx #FFFFFF;
		}
		.photo-normal{
			border: none;
		}
	}
	.top-radius{
		background-color: white;
		z-index: 9;
		margin-top: -70rpx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
	}
	.video-layout{
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 0 32rpx;
		.video-item{
			width: 330rpx;
			background: #FFFFFF;
			border-radius: 16rpx;
			border: 2rpx solid #F5F5F5;
			display: flex;
			flex-direction: column;
			margin-top: 16rpx;
			position: relative;
			.play-img{
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 16rpx;
				right: 16rpx;
				border-radius: 50%;
			}
			.video-img{
				width: 100%;
				height: 500rpx;
				border-radius: 16rpx;
			}
		}
	}
	.nodata{
		display: block;
		width: 100%;
		height: 800rpx;
		overflow: hidden;
		background-color: white;
	}
	
</style>
